<template>
	<view class="mine pb-150">
		<view :style="{ paddingTop: statusBarHeight + 'px' }" class="w-f f jc-f-e p-32 bg">
			<button plain open-type="share" style="margin: 0;padding: 0;border: none;">
				<image src="../../static/mine/share.png" class="w-32 h-32 mt-24 mp-weixin" style="margin-right:160rpx"></image>
			</button>
		</view>
		<view class="f ai-c jc-s-b ph-40 pv-32 bg">
			<view class="f ai-c f1">
				<image :src="detail.avatar" class="w-112 h-112 b-112 mr-24"></image>
				<view>
					<view class="fs-44 fw-500 text-color1">{{detail.name}}</view>
					<view class="fs-28 text-color2 mt-4">ID：{{detail.id}}</view>
				</view>
			</view>
			<view class="f ai-c" @click="navTo()">
				<view class="fs-28 text-color2 mr-8">编辑</view>
				<u-icon name="arrow-right" color="#999999" size="11"></u-icon>
			</view>
		</view>
		<view class="f ai-c w-f h-136 price ph-36">
			<view class="box f fd-c ai-c" @click="toBalance">
				<view class="fs-36 fw-600 text-color4">{{wallet.balance}}</view>
				<view class="fs-24 text-color2 mt-4">余额 (元) <text class="text-color" @click.stop="toWithdrawal">提现></text>
				</view>
			</view>
			<view class="box f fd-c ai-c">
				<view class="fs-36 fw-600 text-color4">{{wallet.totalFreezePrice}}</view>
				<view class="fs-24 text-color2 mt-4">冻结 (元)</view>
			</view>
			<view class="box f fd-c ai-c" @click="toWithdrawalDetail">
				<view class="fs-36 fw-600 text-color4">{{wallet.totalCrashOut}}</view>
				<view class="fs-24 text-color2 mt-4">已提现 (元)</view>
			</view>
		</view>
		<view class="bg b-24 w-f ph-32 pt-40 f fc-w jc-s-b">
			<view class="w-327 h-244 b-24 f fd-c ai-c jc-c modlue mb-32" @click="toMyConsultation">
				<image src="../../static/mine/wdwz.png" class="w-100 h-100"></image>
				<view class="fs-32 text-color4 mt-20">我的问诊</view>
			</view>
			<view class="w-327 h-244 b-24 f fd-c ai-c jc-c modlue mb-32" @click="toMyPatient">
				<image src="../../static/mine/wdhz.png" class="w-100 h-100"></image>
				<view class="fs-32 text-color4 mt-20">我的患者</view>
			</view>
			<view class="w-327 h-244 b-24 f fd-c ai-c jc-c modlue mb-32" @click="toMyMessage">
				<image src="../../static/mine/wdxx.png" class="w-100 h-100"></image>
				<view class="fs-32 text-color4 mt-20">我的消息</view>
			</view>
			<view class="w-327 h-244 b-24 f fd-c ai-c jc-c modlue mb-32">
				<button plain open-type="share" style="margin: 0;padding: 0;border: none;">
					<image src="../../static/mine/yq.png" class="w-100 h-100"></image>
					<view class="fs-32 text-color4 mt-20" style="font-weight: 400;">邀请好友成为宠医</view>
				</button>
			</view>
			<view class="w-327 h-244 b-24 f fd-c ai-c jc-c modlue mb-32" @click="toAccountBind">
				<image src="../../static/mine/zh.png" class="w-100 h-100"></image>
				<view class="fs-32 text-color4 mt-20">收款账号绑定</view>
			</view>
			<view class="w-327 h-244 b-24 f fd-c ai-c jc-c modlue mb-32" @click='toAbout'>
				<image src="../../static/mine/gywm.png" class="w-100 h-100"></image>
				<view class="fs-32 text-color4 mt-20">关于我们</view>
			</view>
			<view class="w-327 h-244 b-24 f fd-c ai-c jc-c modlue mb-32">
				<button plain open-type="contact" style="margin: 0;padding: 0;border: none;">
					<image src="../../static/mine/kf.png" class="w-100 h-100"></image>
					<view class="fs-32 text-color4 mt-20" style="font-weight: 400;">在线客服</view>
				</button>
			</view>
		</view>
		<view class="w-f bg mt-20  h-112  fs-36 fw-500 text-color f ai-c jc-c" @click="loginOutTap">退出登陆</view>

		<Tabbar tab="2" />
	</view>
</template>
<script setup lang="ts">
	import { ref } from 'vue';
	import { useAuthStore } from '@/store/modules/auth';
	import { onShareAppMessage, onShow } from '@dcloudio/uni-app';
	import { doctorDetail, walletGet } from '@/services/api/index';

	const detail = ref('');
	const wallet = ref({});
	const authStore = useAuthStore();
	onShow(() => {
	getDetail();
		uni.hideTabBar()
	});
	function loginOutTap() {
		uni.showModal({
			title: '提示',
			content: '确定退出登录？',
			success: function (res) {
				if (res.confirm) {
					authStore.loginOut()
				}
			}
		});

	}

	//医生详情
	async function getDetail() {
		const { data } = await doctorDetail();
		detail.value = data;
		getWallet()
	}
	//钱包
	async function getWallet() {
		const { data } = await walletGet();
		wallet.value = data;

	}
	function navTo() {
		uni.navigateTo({
			url: '/pages_mine/userInfo',
		});
	}
	//消息
	function toMyMessage() {
		uni.navigateTo({
			url: '/pages_mine/myMessage',
		});
	}
	//问诊
	function toMyConsultation() {
		uni.navigateTo({
			url: '/pages_mine/myConsultation',
		});
	}
	//患者
	function toMyPatient() {
		uni.navigateTo({
			url: '/pages_mine/myPatient',
		});
	}
	//提现明细
	function toWithdrawalDetail() {
		uni.navigateTo({
			url: '/pages_mine/withdrawalDetail',
		});
	}
	//余额
	function toBalance() {
		uni.navigateTo({
			url: '/pages_mine/balance',
		});
	}
	//提现
	function toWithdrawal() {
		uni.navigateTo({
			url: '/pages_mine/withdrawal',
		});
	}
	//绑定
	function toAccountBind() {
		uni.navigateTo({
			url: '/pages_mine/accountBind',
		});
	}
	//绑定
	function toAbout() {
		uni.navigateTo({
			url: '/pages_mine/aboutUs',
		});
	}
	onShareAppMessage(() => {
		return {
			title: '邀请医生入驻',
			path: '/pages/settled/index'
		}
	});
	//头部
	const systemInfo = uni.getSystemInfoSync();
	const statusBarHeight = systemInfo.statusBarHeight;
</script>
<style lang="scss" scoped>
	.mine {
		background: #f5f5f5;
		min-height: 100vh;

		.modlue {
			background: #faf8f5;
		}

		.price {
			background-image: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%);

			.box {
				width: 33.33%;
			}
		}

		.bg {
			background: #fff;
		}
	}
</style>